<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text" id="txt">
   <button id="btn">增加一条</button>
   <ul id="lists">
    
   </ul>
   <script>
     var txt = document.querySelector("#txt");
     var btn = document.querySelector("#btn");
     var lists = document.querySelector("#lists");
     btn.onclick = function(){
      //  获取文本框的值
      var inputValue = txt.value;
      // 创建一个li 并将这个值 作为内容 
      var oli = document.createElement("li");
      oli.innerHTML = inputValue;
      // lists.appendChild(oli);
      if( !lists.children[0] ){
        lists.appendChild(oli);
      }else{
        lists.insertBefore(oli,lists.children[0]);
      }
      txt.value="";
     }
   </script>
</body>
</html>